<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<title>SVG ed</title>
<style>
li:nth-of-type(odd) {background-color: silver;}
li:nth-of-type(even) {background-color: lightblue; text-dir: rtl;}
li:hover {
 background-color: blue;
 color: red;
}
svg {background-color: lightgreen;}
</style>
<script>
var svgns = "http://www.w3.org/2000/svg"

function changeRadio(evt){
 var el=evt.target.firstChild
 el.checked = el.checked ? false : true
 return true
}
function clicked(){
 var f=document.frm
 var r=f.elm
 var v
 for(var i in r){
  if(r[i].checked){v=r[i].value}
 }
 alert(v)
}

function getcoord(evt){
 alert("You clicked at coordinates [" + evt.clientX + "," + evt.clientY + "]")
}

function init(){
 var svg = document.getElementById("svg")
// if (svg.addEventListener)
//  svg.addEventListener("click", getcoord, false) //invoke function
 svg.onmousemove=function(e){
  var evt=window.event || e //cross browser event object
  document.title=evt.clientX+" : "+evt.clientY
 }
 svg.onclick=function(e){
  var evt=window.event || e //cross browser event object
  var point = document.createElementNS(svgns, "circle")
  point.setAttributeNS(null, "cx", evt.clientX)
  point.setAttributeNS(null, "cy", evt.clientY)
  point.setAttributeNS(null, "r", 4)
  document.getElementById("points").appendChild(point)
 }
}
if (window.addEventListener)
 window.addEventListener("load", init, false) //invoke function

</script>
</head>
<body lang="sr">
<form name="frm">
<table border="1" width="100%" height="100%">
<tr>
 <td width="150">
  <ol>
  <li onclick="changeRadio(evt)"><input type="radio" name="elm" value="t" />тачка</li>
  <li onclick="changeRadio(evt)"><input type="radio" name="elm" value="d" />дуж</li>
  <li onclick="changeRadio(evt)"><input type="radio" name="elm" value="k" />кружни лук</li>
  <li onclick="changeRadio(evt)"><input type="radio" name="elm" value="k" />rect</li>
  <li onclick="changeRadio(evt)"><input type="radio" name="elm" value="k" />circle</li>
  <li onclick="changeRadio(evt)"><input type="radio" name="elm" value="k" />ellipse</li>
  <li onclick="changeRadio(evt)"><input type="radio" name="elm" value="k" />line</li>
  <li onclick="changeRadio(evt)"><input type="radio" name="elm" value="k" />polyline</li>
  <li onclick="changeRadio(evt)"><input type="radio" name="elm" value="k" />polygon</li>
  </ol>
 </td>
 <td><svg id="svg" width="100%" height="100%">
  <circle cx="90" cy="70" r="50" stroke="red" fill="gold" />
  <rect x="30" y="40" width="100" height="50" stroke="blue" fill="magenta" />
  <g stroke="black" stroke-width="2" fill="silver">
   <line x1="50" y1="50" x2="100" y2="80" />
   <line x1="100" y1="50" x2="50" y2="80" />
   <path d="M 350 140 a 30 30 0 0 1 60 0 a 40 40 0 0 1 0 80" />
  </g>
  <g stroke="blue" stroke-width="2" fill="green">
   <path d="M 100 100 L 300 100 L 200 300 z" />
   <path d="M 300 150 h 60 v 80 z" />
  </g>
  <g id="points" stroke="white" fill="red">
   <circle cx="50"  cy="50" r="3" />
   <circle cx="100" cy="50" r="3" />
   <circle cx="50"  cy="80" r="3" />
   <circle cx="100" cy="80" r="3" />
  </g>
 </svg></td>
</tr>
</table></form>
</body>
</html>

